<template>
  <a-spin :loading="loading" style="width: 100%; height: 500px">
    <a-card
      class="general-card"
      :title="$t('multiDAnalysis.card.title.dataOverview')"
      style="height: 750px"
    >
      <a-row justify="space-between">
        <a-col v-for="(item, idx) in renderData" :key="idx" :span="6">
          <a-statistic
            :title="item.title"
            :value="item.value"
            show-group-separator
            :value-from="0"
            animation
          >
            <template #prefix>
              <span
                class="statistic-prefix"
                :style="{ background: item.prefix.background }"
              >
                <component
                  :is="item.prefix.icon"
                  :style="{ color: item.prefix.iconColor }"
                />
              </span>
            </template>
          </a-statistic>
        </a-col>
      </a-row>

      <a-row justify="space-between">
        <a-col :span="12">
          <QuestionnaireTypePie style="margin-top: 20px" />
        </a-col>
        <a-col :span="12">
          <QuestionusersLovePie style="margin-top: 20px" />
        </a-col>
      </a-row>

      <!--<Chart style="height: 400px; margin-top: 20px" :option="chartOption" />-->
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { useI18n } from 'vue-i18n';
  import { LineSeriesOption } from 'echarts';
  import { queryDataOverview } from '@/api/visualization';
  import useLoading from '@/hooks/loading';
  import { ToolTipFormatterParams } from '@/types/echarts';
  import useThemes from '@/hooks/themes';
  import useChartOption from '@/hooks/chart-option';
  import questionDataSurveyStore from '@/store/modules/data-screen';
  import QuestionnaireTypePie from '@/views/data-screen/group-data/components/questionnaire-type-pie.vue';
  import QuestionusersLovePie from '@/views/data-screen/group-data/components/questionusers-love-pie.vue';

  const questionData = questionDataSurveyStore();

  const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
    return items
      .map(
        (el) => `<div class="content-panel">
        <p>
          <span style="background-color: ${
            el.color
          }" class="tooltip-item-icon"></span><span>${el.seriesName}</span>
        </p>
        <span class="tooltip-value">${el.value.toLocaleString()}</span>
      </div>`
      )
      .reverse()
      .join('');
  };

  const generateSeries = (
    name: string,
    lineColor: string,
    itemBorderColor: string,
    data: number[]
  ): LineSeriesOption => {
    return {
      name,
      data,
      stack: 'Total',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 10,
      itemStyle: {
        color: lineColor,
      },
      emphasis: {
        focus: 'series',
        itemStyle: {
          color: lineColor,
          borderWidth: 2,
          borderColor: itemBorderColor,
        },
      },
      lineStyle: {
        width: 2,
        color: lineColor,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.1,
        color: lineColor,
      },
    };
  };
  const { t } = useI18n();
  // const { loading, setLoading } = useLoading(true);
  const { isDark } = useThemes();
  const fakeData = computed(() => [
    {
      title: '累积作答问卷数量',
      value: questionData.answer.total,
      prefix: {
        icon: 'icon-edit',
        background: isDark.value ? '#593E2F' : '#FFE4BA',
        iconColor: isDark.value ? '#F29A43' : '#F77234',
      },
    },
    {
      title: '累计作答题目数量',
      value: questionData.answer.time,
      prefix: {
        icon: 'icon-highlight',
        background: isDark.value ? '#3D5A62' : '#E8FFFB',
        iconColor: isDark.value ? '#6ED1CE' : '#33D1C9',
      },
    },
  ]);
  const renderData = computed(() => [
    {
      title: '累积作答问卷数量',
      value: questionData.answer.total,
      prefix: {
        icon: 'icon-edit',
        background: isDark.value ? '#593E2F' : '#FFE4BA',
        iconColor: isDark.value ? '#F29A43' : '#F77234',
      },
    },
    {
      title: '累计作答题目数量',
      value: questionData.answer.time,
      prefix: {
        icon: 'icon-highlight',
        background: isDark.value ? '#3D5A62' : '#E8FFFB',
        iconColor: isDark.value ? '#6ED1CE' : '#33D1C9',
      },
    },
    {
      title: '累积作答时长',
      value: 1000 + Math.random() * 100,
      prefix: {
        icon: 'icon-record',
        background: isDark.value ? '#354276' : '#E8F3FF',
        iconColor: isDark.value ? '#4A7FF7' : '#165DFF',
      },
    },
    {
      title: '总在线时长',
      value: 2000 + Math.random() * 100,
      prefix: {
        icon: 'icon-clock-circle',
        background: isDark.value ? '#3F385E' : '#F5E8FF',
        iconColor: isDark.value ? '#8558D3' : '#722ED1',
      },
    },
  ]);
  const xAxis = ref<string[]>([]);
  const contentProductionData = ref<number[]>([]);
  const contentClickData = ref<number[]>([]);
  const contentExposureData = ref<number[]>([]);
  const activeUsersData = ref<number[]>([]);
  // eslint-disable-next-line no-shadow
  const { chartOption } = useChartOption((isDark) => {
    const graphicElementStyle = {
      textAlign: 'center',
      fill: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969',
      fontSize: 14,
      lineWidth: 10,
      fontWeight: 'bold',
    };
    return {
      title: {
        text: 'Referer of a Website',
        subtext: 'Fake Data',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
      // legend: {
      //   left: 'center',
      //   data: ['UGC原创', '国外网站', '转载文章', '行业报告', '其他'],
      //   bottom: 0,
      //   icon: 'circle',
      //   itemWidth: 8,
      //   textStyle: {
      //     color: isDark ? 'rgba(255,255,255,0.7)' : '#4E5969',
      //   },
      //   itemStyle: {
      //     borderWidth: 0,
      //   },
      // },
      // tooltip: {
      //   show: true,
      //   trigger: 'item',
      // },
      // graphic: {
      //   elements: [
      //     {
      //       type: 'text',
      //       left: '28.5%',
      //       top: 'center',
      //       style: {
      //         text: '纯文本',
      //         ...graphicElementStyle,
      //       },
      //     },
      //     {
      //       type: 'text',
      //       left: '68.5%',
      //       top: 'center',
      //       style: {
      //         text: '图文类',
      //         ...graphicElementStyle,
      //       },
      //     },
      //   ],
      // },
      // series: [
      //   {
      //     type: 'pie',
      //     radius: ['50%', '70%'],
      //     center: ['30%', '50%'],
      //     label: {
      //       formatter: '{d}% ',
      //       color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
      //     },
      //     itemStyle: {
      //       borderColor: isDark ? '#000' : '#fff',
      //       borderWidth: 1,
      //     },
      //     data: [
      //       {
      //         value: [148564],
      //         name: 'UGC原创',
      //         itemStyle: {
      //           color: '#249EFF',
      //         },
      //       },
      //       {
      //         value: [334271],
      //         name: '国外网站',
      //         itemStyle: {
      //           color: '#846BCE',
      //         },
      //       },
      //       {
      //         value: [445694],
      //         name: '转载文章',
      //         itemStyle: {
      //           color: '#21CCFF',
      //         },
      //       },
      //       {
      //         value: [445694],
      //         name: '行业报告',
      //         itemStyle: {
      //           color: '#0E42D2',
      //         },
      //       },
      //       {
      //         value: [445694],
      //         name: '其他',
      //         itemStyle: {
      //           color: '#86DF6C',
      //         },
      //       },
      //     ],
      //   },
      //   {
      //     type: 'pie',
      //     radius: ['50%', '70%'],
      //     center: ['70%', '50%'],
      //     label: {
      //       formatter: '{d}% ',
      //       color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969',
      //     },
      //     itemStyle: {
      //       borderColor: isDark ? '#000' : '#fff',
      //       borderWidth: 1,
      //     },
      //     data: [
      //       {
      //         value: [148564],
      //         name: 'UGC原创',
      //         itemStyle: {
      //           color: '#249EFF',
      //         },
      //       },
      //       {
      //         value: [334271],
      //         name: '国外网站',
      //         itemStyle: {
      //           color: '#846BCE',
      //         },
      //       },
      //       {
      //         value: [445694],
      //         name: '转载文章',
      //         itemStyle: {
      //           color: '#21CCFF',
      //         },
      //       },
      //       {
      //         value: [445694],
      //         name: '行业报告',
      //         itemStyle: {
      //           color: '#0E42D2',
      //         },
      //       },
      //       {
      //         value: [445694],
      //         name: '其他',
      //         itemStyle: {
      //           color: '#86DF6C',
      //         },
      //       },
      //     ],
      //   },
      // ],
    };
  });
  const { loading } = useLoading(false);
</script>

<style scoped lang="less">
  :deep(.arco-statistic) {
    .arco-statistic-title {
      color: rgb(var(--gray-10));
      font-weight: bold;
    }

    .arco-statistic-value {
      display: flex;
      align-items: center;
    }
  }

  .statistic-prefix {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    color: var(--color-white);
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
  }
</style>
